import React, { Component, lazy, Suspense } from 'react'
import { Link, NavLink, Redirect, Route, Switch } from 'react-router-dom'
import '../styles/Index.css'

// import TabBar from '../components/TabBar'
import MyTabBar from '../components/MyTabBar'
import Loading from '../components/Loading';

var Home = lazy(() => import('./Index/Home'))
var Cate = lazy(() => import('./Index/Cate'))
var Mine = lazy(() => import('./Index/Mine'))
var AllGoods = lazy(() => import('./Index/AllGoods'))
var ShopCar = lazy(() => import('./Index/ShopCar'))
var NotFound = lazy(() => import('../views/NotFound'))

export default class Index extends Component {
    render() {
        return (
            <div className='index'>
                {/* 定义二级路由规则 */}
                <Suspense fallBack={<Loading />}>
                    <Switch>
                        <Route exact path='/index/home' component={Home} />
                        <Route exact path='/index/cate' component={Cate} />
                        <Route exact path='/index/allgoods' component={AllGoods} />
                        <Route exact path='/index/shopcar' component={ShopCar} />
                        <Route exact path='/index/mine' component={Mine} />
                        <Redirect exact from='/' to='/index/home' />
                        <Route path='*' component={NotFound} />
                    </Switch>
                </Suspense>

                {/* Link组件默认会渲染成a标签 */}
                {/* NavLink组件默认会渲染成a标签,但是NavLink会维护自身active类的添加/移除 */}
                {/* <TabBar/> */}
                <MyTabBar />
            </div>
        )
    }
}
